import React, { useState, useEffect } from 'react'
import { BorderBox1, Loading } from '@jiaminghi/data-view-react'
import { isEmpty } from 'lodash'

import Options from './option'
import data from './data'

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
import { connect } from 'dva';

// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import LoadSty from '../../../utils/hooks'

import "./btcom.css"

function Index({ getData }) {

    const [Load, setLoad] = useState('flex')

    const InitCreateApp = (config) => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('bottomCom'));
        // 绘制图表
        myChart.setOption(Options(config));
    }

    //初始化使用假数据
    useEffect(() => { 
        InitCreateApp(data.data)
    }, [])
    //更新数据了 就替换
    useEffect(() => {
        if (!isEmpty(getData)) {
            InitCreateApp(getData)
            setLoad('none')
        }
    }, [getData])

    return (
        <BorderBox1 style={{ width: 500, height: 410, margin: '5px 0 25px 50px', overFlow: 'hidden' }}>
            <Loading style={LoadSty(Load)}>大数据计算加载中.....</Loading>
            <div id="bottomCom" style={{ width: 450, height: 400 }}></div>
        </BorderBox1>
    )
}

const mapStateToProps = ({ leftBottomPage }, ownProps) => {
    return {
        getData: leftBottomPage
    }
}

const B = connect(mapStateToProps)(Index)

export default B
